
.news{
  margin:0 -1rem;

  >div:not(:last-child){
    margin-right:1rem;
  }
}

.news_area1{
  height:280px;
  cursor:pointer;
  position:relative;

  &:hover{
    .btns{
      display: block;
    }
  }

  .title{
    width:100%;
    color:white;
    font-size:.85rem;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color:rgba(0,0,0,.3);
    padding: 0.8rem 0.3rem;
    box-sizing: border-box;
    position:absolute;
    bottom:0;
  }

  .btns{
    display:none;

    svg{
      fill:rgba(255,255,255,.3);
    }

    .left_btn{
      width:50px;
      height: 100%;
      position: absolute;
      top:0;
      left:0;

      &:hover{
        svg{
          fill:rgba(255,255,255,.9);
        }
      }
    }

    .right_btn{
      width:50px;
      height: 100%;
      position: absolute;
      top:0;
      right:0;

      &:hover{
        svg{
          fill:rgba(255,255,255,.9);
        }
      }
    }
  }

}

.news_area2{
  height: 280px;
  cursor: pointer;
  position: relative;

  .MuiTabs-root{
    position:relative;
    z-index:1;
  }

  .content{
    width: 100%;
    height:100%;
    position: absolute;
    top:0;
    padding:60px 10px 10px;
    box-sizing: border-box;

    .oa{
      height:100%;
      background-image:url('/zj/img/oa.jpeg');
    }

    .item{
      font-size:15px;

      .text{
        line-height: 2em;
        font-weight: 500;
        white-space: nowrap;
        word-break: inherit;
        overflow:hidden;
        text-overflow: ellipsis;

        &:hover{
          text-decoration: underline;
        }
      }

      .date{
        color: #666;
      }
    }
  }
}

.news_area3 {
  height: 280px;
  cursor: pointer;
  position: relative;

  .content{
    width: 100%;
    height:100%;
    position: absolute;
    top:0;
    padding:90px 40px 40px;
    box-sizing: border-box;

    .oa{
      height:100%;
      background-image:url('/zj/img/oa.jpeg');
    }
  }
}

.infos{
  min-height:430px;
  margin-top:2rem;
  margin-bottom:3rem;
  position:relative;

  .btns{
    cursor:pointer;
    display: none;

    .left_btn{
      margin-top:-24px;
      position:absolute;
      left:-35px;
      top:50%;

      svg{
        height: 48px;
        width: 48px;
      }
    }

    .right_btn{
      margin-top:-24px;
      position:absolute;
      right:-35px;
      top:50%;

      svg{
        height: 48px;
        width: 48px;
      }
    }
  }

  &:hover{
    .btns{
      display: block;
    }
  }

  .item{
    width:33.33%;
    margin-right: 3rem;

    article{
      line-height: 1.6rem;
      padding:1rem;
      padding-top:0;
      font-size: 15px;

      .title{
        line-height: 3rem;
        font-size:20px;
        font-weight: 500;
        text-align:center;

        &:hover{
          text-decoration: underline;
        }
      }

      .memo{
        text-indent:2em;
      }
    }

    img{
      //width: 280px;
      min-height:200px;
    }
  }

  .item:nth-child(3n+0){
    margin-right: 0;
  }
}
